<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>page</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="css/pageStyle/page.css" />

	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">订单</h1>
		</header>
		<div class="mui-content" id="muiContent">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item1mobile" data-wid="pageAll.html">
							全部订单
						</a>
						<a class="mui-control-item" href="#item2mobile" data-wid="pageEvaluate.html">
							待评价
						</a>
						<a class="mui-control-item" href="#item3mobile" data-wid="pageRefund.html">
							退款
						</a>
					</div>
				</div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/webviewGroup.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/server.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.pullToRefresh.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var vm = new Vue({
				el: '#muiContent',
				data: {
					ordersList: [],
					waitEvaluateList: [],
					cancelList: []
				},
				mounted: function() {
					this.inits();
					this.getOrderList();
				},
				methods: {
					inits: function() {
						mui.init();

						mui.plusReady(function() {
							var group = new webviewGroup("viewgroup", {
								items: [{
									id: "pageAll.html",
									url: "page/pageAll.html",
									styles: {
										top: "84px",
										bottom: 0,
										render: "onscreen" // 窗口渲染模式  onscreen可见渲染(默认)/always总是渲染
									},
									extras: {}
								}, {
									id: "pageEvaluate.html",
									url: "page/pageEvaluate.html",
									styles: {
										top: "84px",
										bottom: 0,
										render: "onscreen"
									},
									extras: {}
								}, {
									id: "pageRefund.html",
									url: "page/pageRefund.html",
									styles: {
										top: "84px",
										bottom: 0,
										render: "onscreen"
									},
									extras: {}
								}],
								onChange: function(obj) {
									var c = document.querySelector(".mui-control-item.mui-active");
									if(c) {
										c.classList.remove("mui-active");
									}
									document.querySelector(".mui-scroll .mui-control-item:nth-child(" + (parseInt(obj.index) + 1) + ")").classList.add("mui-active");
								}
							});
							mui(".mui-scroll").on("tap", ".mui-control-item", function(e) {
								var wid = this.getAttribute("data-wid");
								group.switchTab(wid);
							});

						});
						mui.back = function() {
							var _self = plus.webview.currentWebview();
							_self.close("auto");
						}
					},
					update: function(serverUrl, dataBox) {
						console.log(serverUrl)
						mui.ajax(serverUrl, {
							type: 'get',
							dataType: 'json',
							success: function(res) {
								console.log(res)
								vm.dataBox = res.rows
							},
							error: function(type) {
								console.log('错误:' + type)
							}
						})
					},
					getOrderList: function() {
						$.ajax({
							url: server + "/order/threeMonthList",
							type: "get",
							dataType: 'json',
							async: true,
							success: function(res) {
								console.log(res)
								vm.ordersList = res.rows;
								console.log(vm.ordersList[0].orderItemList)
							},
							error: function(type) {
								console.log(type)
							}
						});
					}
				}
			})
		</script>
	</body>

</html>